<template>
  <div class="charts">
    <!-- 饼状图 -->
    <div id="mychartspie" style="width: 600px; height: 400px"></div>
    <!-- 柱状图 -->
    <div id="mychartsbar" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      scaleData: [], //饼状图数据
      scalelegend: [], //饼状图标注
      bararr: {}, //柱状图数据
      dayarr: [], //柱状图时间轴(x轴)
      blogarr: [], //柱状图文章数量(y轴)
    }
  },
  // watch: {
  //   datay: {
  //     //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
  //     handler: function () {
  //       this.drawLine()
  //     },
  //     deep: true,
  //   },
  // },
  mounted() {
    this.drawLine()
    this.drawpie()
  },
  methods: {
    drawLine() {
      //定义坐标数组
      let dayarr = []
      let blogarr = []
      //图表初始化
      let mychartsbar = this.$echarts.init(
        document.getElementById('mychartsbar')
      )
      //axios获取数据
      this.$http.get('/dashboard/bar', { type: 'paper' }).then((res) => {
        // console.log(res.result)
        if (res.result === '00000') {
          //接收接口返回的数据
          this.bararr = res.data
          // console.log(this.bararr)
          //横坐标是时间,遍历循环后放到dararr
          for (let i = 0; i < this.bararr.length; i++) {
            this.dayarr[i] = this.bararr[i].day
          }
          //纵坐标是文章数量,遍历循环后放到blogarr
          for (let i = 0; i < this.bararr.length; i++) {
            this.blogarr[i] = this.bararr[i].total
          }
          //将数据放到定义的数组中
          dayarr = this.dayarr
          blogarr = this.blogarr
          // 指定图表的配置项和数据
          mychartsbar.setOption({
            //图表标题
            title: {
              text: '每日发表博客情况',
              x: 'center',
            },
            tooltip: {},
            //图例
            legend: {
              data: ['博文发表数量'],
              orient: 'verticle',
              x: 'right',
              y: 'top',
            },
            //横坐标
            xAxis: {
              name: '日期',
              data: dayarr,
            },
            //纵坐标
            yAxis: {
              name: '博文发表数量',
              type: 'value',
            },
            series: [
              {
                name: '博文发表数量',
                type: 'bar',
                data: blogarr,
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)',
                },
              },
            ],
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
      window.addEventListener('resize', () => {
        mychartsbar.resize()
      })
    },
    drawpie() {
      //获取数据
      let scaleData = []
      let scalelegend = []
      //绘制图表
      const mychartspie = this.$echarts.init(
        document.getElementById('mychartspie')
      )
      //从接口获取数据
      this.$http
        .get('/dashboard/pie', { type: this.selectedScale })
        .then((res) => {
          if (res.result === '00000') {
            //通过data定义的数组获取返回值
            this.scaleData = res.data
            //通过内部定义的数组接收返回值
            scaleData = this.scaleData
            //console.log(scaleData)
            //遍历循环后放入scalelegend
            for (let i = 0; i < res.data.length; i++) {
              this.scalelegend[i] = res.data[i].name
            }
            scalelegend = this.scalelegend
            //console.log(scalelegend)
            //setoption方法绘制
            mychartspie.setOption({
              legend: {
                data: scalelegend,
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/> {b} : {c} ({d}%)',
              },
              series: [
                {
                  name: '文章类型',
                  data: scaleData,
                  radius: '50%',
                  type: 'pie',
                  radius: [70, 140],
                  rosetype: 'radius',
                  itemStyle: {
                    borderRadius: 5,
                  },
                  label: {
                    show: true,
                    // position: 'outside',
                    // formatter: '{b}({d}%)',
                  },
                  emphasis: {
                    label: {
                      show: true,
                    },
                  },
                },
              ],
            })
          } else {
            this.$message.error(res.data.message)
          }
        })
      window.addEventListener('resize', () => {
        mychartspie.resize()
      })
    },
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.charts {
  margin: 50px;
  padding: 50px;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
</style>
